<template>
    <el-tabs v-model="activeTab" class="basic-tabs"  style="width:auto;min-height:600px;border-right: none; border-bottom: none !important; border-top: none !important;border-radius: 0;">

      <el-tab-pane  label="首页广告" name="banner">
        <ArticleConfig :form="bannerForm" mark="banner"/>
      </el-tab-pane>
      <el-tab-pane label="公告发布" name="notice">
        <ArticleConfig :form="noticeForm" mark="notice" />
      </el-tab-pane>
      <el-tab-pane label="做单须知" name="should">
        <ArticleConfig :form="shouldForm" mark="should"/>
      </el-tab-pane>
      <el-tab-pane label="温心提示" name="reminder">
        <ArticleConfig :form="reminderForm" mark="reminder"/>
      </el-tab-pane>
      <el-tab-pane label="用户协议" name="agreement">
        <ArticleConfig :form="agreementForm" mark="agreement"/>
      </el-tab-pane>
      <el-tab-pane label="隐私政策" name="privacy">
        <ArticleConfig :form="privacyForm" mark="privacy" />
      </el-tab-pane>
      <el-tab-pane label="邀友赚钱" name="invite">
        <ArticleConfig :form="inviteForm" mark="invite" />
      </el-tab-pane>
      <el-tab-pane  label="站点配置" name="site">
        <ConfigVal :form="configForm" mark="site"/>
      </el-tab-pane>
      <el-tab-pane  label="一级总代理" name="level1">
        <ArticleConfig :form="levelForm1" mark="level1"/>
      </el-tab-pane>
      <el-tab-pane  label="代理" name="level2">
        <ArticleConfig :form="levelForm2" mark="level2"/>
      </el-tab-pane>
<!--      <el-tab-pane  label="提现规则" name="cashRules">-->
<!--        <CashRulesForm :form="cashRulesForm" mark="cashRules"/>-->
<!--      </el-tab-pane>-->
    </el-tabs>
  </template>

  <script setup>
    import { ref, reactive, markRaw, defineAsyncComponent } from 'vue';
    import ArticleConfig from '@/components/ArticleConfig.vue';
    import { sysIntroService } from '@/api/sysIntroService';
    import ConfigVal from '@/components/ConfigVal.vue';
    import  CashRulesForm from '@/components/CashRulesForm.vue';
    const activeTab = ref('banner'); // 默认激活的标签页
    const bannerForm = reactive({}); // 修改为 reactive 确保响应式
    const shouldForm = reactive({});
    const reminderForm = reactive({});
    const agreementForm = reactive({});
    const privacyForm = reactive({});
    const inviteForm = reactive({});
    const configForm = reactive({});
    const noticeForm = reactive({});
    const levelForm1 = reactive({});
    const levelForm2 = reactive({});
    const getSysIntroList = async () => {
      try {
        const response = await sysIntroService.getSysIntro();

        if (response.code !== 1) {
          console.error('获取数据失败:', response.message);
          return;
        }

        const data = response.data || [];
        Object.assign(bannerForm, data.find(item => item.mark === 'banner') || { content: '' });
        Object.assign(noticeForm, data.find(item => item.mark === 'notice') || { content: '' });
        Object.assign(shouldForm, data.find(item => item.mark === 'should') || { content: '' });
        Object.assign(reminderForm, data.find(item => item.mark === 'reminder') || { content: '' });
        Object.assign(agreementForm, data.find(item => item.mark === 'agreement') || { content: '' });
        Object.assign(privacyForm, data.find(item => item.mark === 'privacy') || { content: '' });
        Object.assign(inviteForm, data.find(item => item.mark === 'invite') || { content: '' });
        Object.assign(levelForm1, data.find(item => item.mark === 'level1') || { content: '' });
        Object.assign(levelForm2, data.find(item => item.mark === 'level2') || { content: '' });
        // Object.assign(cashRulesForm, data.find(item => item.mark === 'cashRules') || { content: '' });
        console.log('bannerForm:', bannerForm);
      } catch (error) {
        console.error('获取数据失败:', error);
      }
    };

    getSysIntroList();

    const tabs = ref([
      { label: '站点配置', name: 'site'},
      { label: '公告发布', name: 'notice'},
      { label: '首页广告', name: 'banner'},
      { label: '做单须知', name: 'should' },
      { label: '温心提示', name: 'reminder' },
      { label: '用户协议', name: 'agreement'},
      { label: '隐私政策', name: 'privacy'},
      { label: '邀友赚钱', name: 'invite'},
      { label: '一级总代理', name: 'level1'},
      { label: '代理', name: 'level2'}
      // { label: '提现规则', name: 'cashRules'}
    ]);
    const tabIndex = ref(0);
    const addTab = () => {
      const newTab = {
        label: `BaseConfig`,
        name: `tab${tabIndex.value}`,
        component: markRaw(defineAsyncComponent(() =>
          import('./BaseConfig.vue').catch((err) => {
            console.error('组件加载失败:', err);
            return { render: () => '加载失败，请检查组件路径或网络连接' };
          })
        ))
      };
      tabs.value.push(newTab);
      activeTab.value = newTab.name;
      tabIndex.value++;
    };
  </script>
<style scoped>
.basic-tabs {
  padding: 20px;
  border-top: 1px solid #eaeaea;
}
.tab-first{
    padding-top: 20px;
}

</style>
